<template>
  <div class="background">
    
    
    <el-form :model="user" class="login">
      <div style="margin-bottom:60px;margin-right:30px">
        <img src="../assets/logo.png" style="width: 80px;">
        <el-text style="font-size:30px">环保应急管理系统</el-text>
      </div>
      
    <el-form-item label="账号：" prop="userID">
      
      <el-input v-model="user.userID" type="text" style="margin-right:20px;width:250px" autocomplete="off" :prefix-icon="User"/>
    </el-form-item>
    <el-form-item label="密码：" prop="password">
    
      <el-input style="margin-right:20px;width:250px" v-model="user.password" type="password" autocomplete="off" show-password="" :prefix-icon="Lock"/>
    </el-form-item>
    
    <el-radio-group v-model="user.role" >
      
      <el-radio value="工作人员" size="small" style="margin-left:60px;margin-right:60px">工作人员</el-radio>
      <el-radio value="专家人员" size="small" style="margin-left:60px;margin-right:60px">专家</el-radio>
      
    </el-radio-group>
    <div class="icon">
      <el-icon style="visibility:hidden"><Check /></el-icon>
      <span style="visibility:hidden">嗨</span>
      <el-icon v-show="showright" color="green"><Check /></el-icon>
      <el-icon v-show="showfault" color="red"><Close /></el-icon>  
      <span :style="{color:spancolor,fontsize:'x-smaller'}">{{show}}</span>
    </div>  
    

    <el-form-item style="margin-top:20px">
      <el-button style="height:40px;margin-left:60px;margin-right:60px;width:290px;" type="primary" @click="SubmitEvent">登录</el-button>
    </el-form-item> 
    <el-form-item style="margin-bottom:20px">
      <el-button style="height:40px;margin-left:60px;margin-right:60px;width:290px">取消</el-button>
    </el-form-item> 
    
  </el-form>


  </div>
  
 





</template>

<script setup>
import {ref,inject} from "vue"
import {useRouter,useRoute} from "vue-router"
const route=useRoute();
const router=useRouter();
const axios=inject("axios");
import { User,Lock,Check,Close} from "@element-plus/icons-vue";

let showright=ref(false);
let showfault=ref(false);
let show=ref();
let spancolor='blue';

const user=ref({
    userID:"",
    password:"",
    userName:"",
    role:""
})
const u=ref({

})

const SubmitEvent=async()=>{
    if(user.value.password==""){
      showfault.value=true;
      showright.value=false;
      show.value="请输入密码！"
      spancolor='red'
    }
    else if(user.value.role==""){
      showright.value=false;
      showfault.value=true;
      spancolor='red';
      show.value="请选择角色！"
    }
    else if(user.value.userID==""){
      showright.value=false;
      showfault.value=true;
      spancolor='red';
      show.value="请输入账号！"
    }
    else {
    await axios.post("/Worker/userlogin",{
        userID:user.value.userID,
        password:user.value.password,
        role:user.value.role
      })
      .then((response)=>{
        if(response.data=="")
        {
          showright.value=false;
          showfault.value=true;
          spancolor='red';
          show.value="账号或密码错误！"
        }
        else{
          u.value=response.data
          sessionStorage.setItem("user",JSON.stringify(u))
          if(user.value.role=="工作人员")
          {
            router.push({path:"/workerMainPage"})
          }
          else {
            router.push({path:"/specialistMainPage"})
          } 
        }
      })
      .catch((error)=>{
        console.log(error);
      })
    }

}


</script>

<style scoped>
.login{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color:black;
}
.login button{
    width: 280px;
    height: 40px;
    border: none;
    font-weight: bold;
    letter-spacing: 8px;
    cursor: pointer;
    /* 动画过渡 */
    transition: 0.5s;
}
.container button:hover{
    background: linear-gradient(-200deg,#aac2ee, #c4c0fa);
    background-position-x: -280px;
}
.icon{
  display:flex;
  flex-direction: row;
  margin-right: 175px;
  
}
.background{
  background:url("../assets/loginbackground.png");
}



</style>